<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        function add(){
            var name = $("#name").val();
            var sex = $("#sex").val();
            var age = $("#age").val();
            var idc = $("#idc").val();
            var rnum = $("#rnum").val();
            var time= $("#time").val();

            var count = $("tbody>tr").length + 1;
            
            var row = `<tr>
        <td>${count}</td>
        <td>${name}</td>
        <td>${sex}</td>
        <td>${age}</td>
        <td>${idc}</td>
        <td>${rnum}</td>
        <td>${time}</td>
        <td><button type="button" onclick="del(this)">删除</button></td>
    </tr>`
    $("tbody").append(row);
        }
        function del(btn){
            $(btn).parent().parent().remove();
        }
    </script>
<form>
<label style="text-align: right;display: inline-block;">
姓名：<input type="text" id="name"><br>
    性别：<input type="text" id="sex"><br>
    年龄：<input type="text" id="age"><br>
    身份证号：<input type="text" id="idc"><br>
    房间号：<input type="text" id="rnum"><br>
    入住时间：<input type="text" id="time"><br>
</label>

</form>
<button type="button" onclick="add()">添加</button>
<table border="1px">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>身份证号</th>
            <th>房间号</th>
            <th>入住时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
    
</body>
</html>